<template>
  <div>
    <el-card class="card">
      <div style="margin-bottom: 20px;"><el-text tag="b" style="font-size: 20px;">学生选课</el-text></div>
      <el-text class="mx-1" size="large">选课查询条件:</el-text>
      <el-select v-model="grade" class="m-2" placeholder="年级" size="large" style="margin-left: 2%;width:20%;" @change="handleChangeGrade">
        <el-option
            v-for="item in grades"
            :key="item"
            :label="item"
            :value="item"
        />
      </el-select>
      <el-select v-model="majorId" class="m-2" placeholder="专业" size="large" style="margin-left: 3%;margin-right: 3%;width:20%;" @change="handleChangeMajor">
        <el-option
            v-for="item in majorList"
            :key="item.id"
            :label="item.majorName"
            :value="item.id"
        />
      </el-select>
      <el-button type="warning" @click="search(grade,majorId)" style="height:40px;"><el-icon style="margin-right: 10px;"><Search /></el-icon> 查询</el-button>
      <div style="margin-top: 30px;border-bottom: 1px solid var(--el-border-color);"></div>
      <el-table :data="courseList" style="width: 100%">
        <el-table-column prop="id" label="课号"  />
        <el-table-column prop="courseName" label="课程名"  />
        <el-table-column prop="teacherId" label="授课教师" />
        <el-table-column prop="credit" label="学分"  />
        <el-table-column prop="remain" label="剩余"  />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
                type="success"
                @click="stuChooseCourse(scope.row.id)"
            >
              选课
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref,reactive} from 'vue'
import {searchCourse } from "@/api/student";
import { majorItem } from "@/api/system/type";
import { getAllMajor } from "@/api/system";
import { Course } from "@/api/student/type";
import { chooseCourse } from "@/api/student";
import { ElMessage } from 'element-plus'
import { reqMajorInfo } from "@/api/system/type";

const reqMajorForm = reactive<reqMajorInfo>({
  // majorName:'',
  page:0,
  pageSize:10
})
const majorList = ref<majorItem[]>()
const majorId = ref()
const grades = [2020,2021,2022,2023]
const grade = ref()
const courseList = ref<Course[]>()
onMounted(async ()=> {
  try {
    const { data } = await getAllMajor(reqMajorForm)
    majorList.value = data.records
    console.log(majorList.value)
  } catch (error) {
    await Promise.reject(error)
  }
})

const handleChangeGrade = (newValue:number) => {
  grade.value = newValue
}
const handleChangeMajor = (newValue:number) => {
  majorId.value = newValue
}
const search = async (grade:number,majorId:number) => {
  try {
    const { data } = await searchCourse(grade,majorId)
    console.log('查询结果',data)
    courseList.value = data
  } catch(error) {
    await Promise.reject(error)
  }
}
const stuChooseCourse = async(courseId:number) => {
  try {
    const res = await chooseCourse(courseId)
    if (res.code === 200) {
      ElMessage({
        message: res.data,
        type: 'success',
      })
    }
    else {
      ElMessage({
        message: res.message,
        type: 'info',
      })
    }
  } catch(error) {
    Promise.reject(error)
  }
}

</script>

<style scoped>
.card {
  padding:20px;
  margin: 0 auto;
  margin-top: 3%;
  width:60%;
  min-height:600px;
  height:90%;
}
</style>
